<template>
  <div id="dept">
    <!-- 头部标题 -->
    <div class="header">
      <span>首页 >> 部门管理</span>
    </div>
    <!-- 添加部门以及表格 -->
    <div class="deptInner">
      <div class="addDept" @click="addDeptFormVisible = true">
        <i class="el-icon-circle-plus-outline"></i>
        <span>添加部门</span>
      </div>
      <div class="table">
        <template>
          <el-table :data="tableData" height="700" border style="width: 100%">
            <el-table-column prop="deptNo" label="部门编号" width="100">
            </el-table-column>
            <el-table-column prop="deptName" label="部门名称" width="150">
            </el-table-column>
            <el-table-column prop="deptLocation" label="部门位置" width="180">
            </el-table-column>
            <el-table-column
              prop="deptPrincipal"
              label="部门负责人"
              width="180"
            >
            </el-table-column>
            <el-table-column label="操作列表" width="200">
              <template slot-scope="scope">
                <div class="tableBtn">
                  <!-- 删除按钮 -->
                  <el-popconfirm
                    title="确定删除此部门吗？"
                    @confirm="deleteDept(scope.$index)"
                  >
                    <el-button
                      slot="reference"
                      type="danger"
                      icon="el-icon-delete"
                      circle
                    ></el-button>
                  </el-popconfirm>
                  <!-- 修改按钮 -->
                  <el-button
                    @click="editDeptBtn(scope.$index)"
                    type="primary"
                    icon="el-icon-edit"
                    circle
                  ></el-button>
                  <!-- 查看详情按钮 -->
                  <el-button icon="el-icon-search" circle></el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <el-pagination
        :current-page.sync="assignGroupSearch.pageNo"
        :page-size="assignGroupSearch.rows"
        :page-sizes="[10, 20, 50, 100]"
        layout="sizes, total, prev, pager, next"
        :total="assignGroupSearch.total"
        @size-change="(e) => tableSizeChange(e)"
        @current-change="(e) => tableCurrentChange(e)"
      >
      </el-pagination>
      <!-- 添加部门弹窗 -->
      <div class="addForm">
        <el-dialog
          title="添加部门"
          width="650px"
          :visible.sync="addDeptFormVisible"
        >
          <!-- 部门编号 -->
          <div class="deptId">
            <span>部门编号</span>
            <el-input
              v-model="AddData.deptNo"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 部门编号 -->
          <div class="deptId">
            <span>部门名称</span>
            <el-input
              v-model="AddData.deptName"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 部门编号 -->
          <div class="deptId">
            <span>部门位置</span>
            <el-input
              v-model="AddData.deptLocation"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 部门编号 -->
          <div class="deptPrin">
            <span>部门负责人</span>
            <el-input
              v-model="AddData.deptPrincipal"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 底部按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="addDeptFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="newDept">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 修改部门信息弹窗 -->
      <div class="addForm">
        <el-dialog
          title="编辑部门信息"
          width="650px"
          :visible.sync="editDeptFormVisible"
        >
          <!-- 部门编号 -->
          <div class="deptId">
            <span>部门编号</span>
            <el-input
              v-model="editData.deptNo"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 部门编号 -->
          <div class="deptId">
            <span>部门名称</span>
            <el-input
              v-model="editData.deptName"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 部门编号 -->
          <div class="deptId">
            <span>部门位置</span>
            <el-input
              v-model="editData.deptLocation"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 部门编号 -->
          <div class="deptPrin">
            <span>部门负责人</span>
            <el-input
              v-model="editData.deptPrincipal"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 底部按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="editDeptFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="edit">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getDept, deleteDeptById, addDept, editDept } from "@/api/deptAPI";
export default {
  name: "daptManage",
  data() {
    return {
      // 表格数据
      tableData: [
        {
          deptId: "",
          deptLocation: "",
          deptName: "",
          deptNo: "",
          deptPrincipal: "",
        },
      ],
      // 添加部门临时数据
      AddData: {
        deptLocation: "",
        deptName: "",
        deptNo: "",
        deptPrincipal: "",
      },
      // 编辑部门信息
      editData: {
        deptLocation: "",
        deptName: "",
        deptNo: "",
        deptPrincipal: "",
      },
      // 添加部门弹窗是否显示
      addDeptFormVisible: false,
      // 修改部门信息弹窗
      editDeptFormVisible: false,
      detailList: [],
      assignGroupSearch: {
        pageNo: 1, // 页数
        rows: 10, // 每页展示条数
        total: 0, // 总数
      },
    };
  },
  methods: {
    // 获取部门数据，一次10条
    getDeptByPage: function () {
      getDept().then((res) => {
        if (res.code === 200) {
          this.detailList = res.data;
          this.assignGroupSearch.total = res.data.length;
        }
      });
    },
    // 删除部门
    deleteDept: function (index) {
      deleteDeptById(this.tableData[index].deptId).then((res) => {
        if (res.code === 200) {
          this.tableData.splice(index, 1);
          this.$message({
            message: "删除成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 添加部门
    newDept: function () {
      addDept(this.AddData).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.addDeptFormVisible = false;
          this.getDeptByPage(0);
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 点击修改按钮
    editDeptBtn: function (index) {
      this.editData = JSON.parse(JSON.stringify(this.tableData[index]));
      this.editDeptFormVisible = true;
    },
    edit: function () {
      editDept(this.editData).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.editDeptFormVisible = false;
          this.getDeptByPage(0);
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 跳页
    tableCurrentChange(e) {
      this.assignGroupSearch.pageNo = e;
      this.getDeptByPage();
      setTimeout(() => {
        this.tableData = this.detailList.slice((e - 1) * 10, e * 10);
      }, 500);
    },
    // 每页展示条数变更
    tableSizeChange(e) {
      this.assignGroupSearch.rows = e;
      this.assignGroupSearch.pageNo = 1;
      this.getDeptByPage();
      setTimeout(() => {
        this.tableData = this.detailList.slice(0, 10);
      }, 500);
    },
  },
  mounted() {
    this.getDeptByPage();
    setTimeout(() => {
      this.tableData = this.detailList.slice(0, 10);
    }, 500);
  },
};
</script>

<style lang="less" scoped>
#dept {
  .header {
    background-color: deepskyblue;
    display: flex;
    height: 30px;
    align-items: center;
  }
  // 内容
  .deptInner {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 50px;
    .addDept {
      width: 90px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      i {
        font-size: 20px;
        margin-right: 2px;
      }
    }
    .table {
      margin-top: 20px;
      ::v-deep .el-table th {
        background-color: bisque;
      }
      ::v-deep .el-table__cell {
        border: 3px double gray;
      }
      ::v-deep .el-table__cell.gutter {
        background-color: white;
        border: none;
      }
      .tableBtn {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      }
    }
    .addForm {
      display: flex;
      flex-direction: column;
      .el-input {
        width: 496px;
      }
      .deptId,
      .deptPrin {
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .el-input {
          margin-left: 30px;
        }
      }
      .deptPrin {
        .el-input {
          margin-left: 16px;
        }
      }
    }
  }
}
</style>